<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.1.1/jquery.mobile-1.1.1.min.js">
        </script>
		<script src="scripts/utils.js">
        </script>

        <script>
            $(document).ready(function(){
				var studentId = getUrlParam('studentId');
				loadGrades(studentId);
            });
			
			function loadGrades(studentId) {
				$.ajax({
                url: "http://127.0.0.1:8888/rest/grades/" + studentId,
                type: "GET",
                timeout: 5000,
                dataType: "json",
                success:
                    function (grades) {
						var gradesHTML = "";
						for (var i = 0; i < grades.length; i++) {
                            var grade = grades[i];
							gradesHTML += "<li>";
							gradesHTML += grade.name;
							gradesHTML += " " + grade.mark;
							gradesHTML += "</li>";
						}
						
						$('#grades').html(gradesHTML);
                    },
                error:
                    function (err) {
                        alert("error: " + err.status);
                    }
				});
			}
        </script>
    </head>
    <body>
            <div>
                <ul data-role="listview" data-divider-theme="b" data-inset="false">
                    <li data-role="list-divider" role="heading">
                        Grades
                    </li>
					<ol id="grades">
					</ol>
                </ul>
            </div>
    </body>

</html>